<template>
  <div class="box">
    <van-nav-bar title="商品分类" left-text="返回" @click-left="onClickLeft" />
    <div class="content">
      <van-tree-select
        height="200vm"
        :items="items"
        :main-active-index.sync="activeIndex"
        @click-nav="onNavClick"
      >
        <template #content>
          <van-grid v-if="active === 0">
            <van-grid-item
              icon="photo-o"
              :text="item.brand"
              v-for="(item, index) in brandslist"
              :key="index"
              @click="gobrandlist(item.brand)"
            />
          </van-grid>
        </template>
      </van-tree-select>
    </div>
    <BottombarCom />
  </div>
</template>

<script>

import { fun_categorylist } from "../../api/index.js";
import { fun_categorybrandlist } from "../../api/index.js";
import { Toast } from "vant";

export default {
  data() {
    return {
      active: 0,
      items: [],
      activeIndex: 0,
      brandslist: [],
      mykindof: "",
    };
  },
  methods: {
    onClickLeft() {
      Toast("返回");
      this.$router.go(-1);
    },
    onNavClick(index) {
      // console.log(index);
      let a = JSON.parse(JSON.stringify(this.items[index])); //这是我们通过index获取到当前点击的值                                  //这是请求右侧列表的请求通过activeId去请求。
      fun_categorybrandlist(a.text).then((res) => {
        this.brandslist = res.data.data;
        this.mykindof = a.text;
      });
    },
    //  去列表页
    gobrandlist(brand) {
      console.log(brand);
 
        this.$router.push({
          name: "searchlist",
          params: {
            category: this.mykindof,
            brand: brand
          },
        });
    },
  },

  created() {
    fun_categorylist().then((res) => {
      let arr = res.data.data;
      arr.forEach((value, index) => {
        this.items.push({ text: arr[index] });
      });
    });
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.content {
  flex: 1;
  overflow: auto;
  /* display: flex; */
}
.van-tree-select {
  /* position: fixed; */
  overflow: auto;
  height: 100%;
}
/* .category-list {
  width: 3.3333rem;
  height: 100%;
  border-right: 1px solid gray;
  overflow-y: scroll;
} */

/* .category-list li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid black;
  padding: 0.5556rem 0.3333rem;
} */
/* ul li {
  font-size: 0.7222rem;
} */
/* .brand {
  flex: 1;
} */
</style>